<nz-spin [nzSpinning]="loading">
<page-header title="{{'#'+order.orderId}}">
    <ng-template #logo>
        <img src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png">
    </ng-template>
    <ng-template #action>       
        <button nz-button [nzType]="'primary'" *ngIf="order.status==='NOCHECK'" (click)="sure()">{{'confirm' | translate}}</button>
        <button nz-button [nzType]="'danger'" *ngIf="order.status!=='CANCEL' && order.status !== 'COMPLETE'" (click)="cancelOrder()">{{'cancel' | translate}}</button>
        <button nz-button (click)="back()"><i class="anticon anticon-rollback"></i>{{'goback' | translate}}</button>     
    </ng-template>
    <ng-template #breadcrumb>
        <nz-breadcrumb>
            <nz-breadcrumb-item>{{'order' | translate}}</nz-breadcrumb-item>
            <nz-breadcrumb-item><a [routerLink]="['/order/clientorder']">{{'clientorder' | translate}}</a></nz-breadcrumb-item>          
        </nz-breadcrumb>
    </ng-template>    
    <ng-template #extra>
        <div nz-row>
            <div nz-col nzXs="24" nzSm="8">
                <p class="text-grey">{{ 'status' | translate}}</p>
                <p class="text-lg">{{order.status | OrderStatus | translate}}</p>
            </div>
            <div nz-col nzXs="24" nzSm="8">
                <p class="text-grey">{{ 'qty' | translate}}</p>
                <p class="text-lg">{{order.qty}}</p>
            </div>
            <div nz-col nzXs="24" nzSm="8">
                <p class="text-grey">{{'price' | translate}}</p>
                <p class="text-lg">{{order.price}}</p>
            </div>
        </div>
    </ng-template>

    <desc-list size="small" col="2">
        <desc-list-item term="{{'createUser'|translate}}">{{order.createUser}}</desc-list-item>        
        <desc-list-item term="{{'createDate' | translate}}">{{order.createDate}}</desc-list-item>
        <desc-list-item term="{{'salenum' | translate }}">{{order.ebeln}}</desc-list-item>
    </desc-list>
</page-header>

<nz-card *ngIf="currentStep !== -1" [nzBordered]="false" class="mb-lg" nzTitle="{{'orderProgress' | translate}}">
    <nz-steps [nzCurrent]="currentStep" nzProgressDot>
        <nz-step nzTitle="{{'order-process-submit'|translate}}" [nzDescription]="createDesc">
            <ng-template #createDesc>
                <div class="desc">
                    <div class="my-sm">{{order.createUser}}</div>
                    <div>{{order.createDate}}</div>
                </div>
            </ng-template>
        </nz-step>
        <nz-step nzTitle="{{'order-process-confirm' | translate}}" [nzDescription]="checkDesc">            
            <ng-template #checkDesc>
                <div class="desc">
                    <div class="my-sm">{{order.sureUsername}}</div>
                    <div>{{order.sureDate}}</div>
                </div>
            </ng-template>
        </nz-step>        
        <nz-step nzTitle="{{'order-process-shipping'|translate}}"></nz-step>
        <nz-step nzTitle="{{'order-process-complete'|translate}}"></nz-step>
    </nz-steps>
    <div class="steps-content"></div>
</nz-card>
<ng-template #infoTemplate>
    <span><strong>Qty:</strong> <span style="font-size: 16px;" class="ml-md">{{order.qty}}</span></span>
    <span class="ml-md"><strong>Qty Confirmed:</strong> <span style="font-size: 16px;" class="ml-md">{{confirmQty()}}</span></span>
</ng-template>
<nz-card [nzBordered]="false" class="mb-lg" nzTitle="{{'orderDetail' | translate}}" [nzExtra]="infoTemplate">
    <button style="margin-bottom: 5px;" nz-button nzType="default" (click)="exportDetail()">Export</button>
    <button *ngIf="isManager" [nzLoading]="syncing" (click)="doSycnStock()" style="margin-bottom: 5px; margin-left: 5px;" nz-button nzType="default">Reload stock</button>
    <simple-table #st [columns]="columns" [data]="order.details" toTopInChange="false">
        <ng-template st-row="img" let-i>
            <img *ngIf="i.product.img" (click)="showImage(imgSuffix + i.product.img)" style="max-width:135px;height: 100%" src="{{(imgSuffix + i.product.img)}}">
            <img *ngIf="!i.product.img" style="max-width:135px" src="{{defaultUrl}}">
        </ng-template>
        <ng-template st-row="sku" let-i>
            <div>
                {{i.productCd}}
                <small class="ml-sm"><nz-tag>{{i.product.brand | brandEnPipe | uppercase}}</nz-tag></small>
            </div>
            <small class="text-grey-dark mr-md">Frame material: {{i.product.pfTexture}}</small>
            <small *ngIf="i.product.brand.indexOf('光学') < 0" class="text-grey-dark mr-md">Lens material: {{i.product.lensTexture}}</small>
            <small class="text-grey-dark mr-md">Frame color: {{i.product.colorSpec}}</small>
            <small *ngIf="!isManager && i.missFlag"><strong class="text-red">Out of stock </strong> <span *ngIf="i.product.repDate" class="text-red">ready date:{{i.product.repDate}}</span></small>
            <small *ngIf="isManager && i.product.gmStockSap < i.qty"><strong class="text-red">Out of stock</strong> <span *ngIf="i.product.repDate" class="text-red">ready date:{{i.product.repDate}}</span></small>
        </ng-template>
        
        <ng-template st-row="price" let-i>
            {{i.price}}
        </ng-template>
        <ng-template st-row="totalPrice" let-i>
            {{i.price * i.qty}}
        </ng-template>
    </simple-table>
</nz-card>
</nz-spin>
<nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
    <ng-template #modalContent>
        <a href="javascript:void(0)"><img [src]="previewImage" [ngStyle]="{ 'width': '100%' }"/></a>
    </ng-template>
</nz-modal>


<nz-drawer [nzClosable]="false" [nzWidth]="320" [nzVisible]="visible" nzTitle="确认订单" (nzOnClose)="close()">
    <form nz-form>
        <div nz-row>
            <div nz-col nzSpan="24">
                <nz-form-item>
                    <nz-form-label>凭证日期</nz-form-label>
                    <nz-form-control>
                        <nz-date-picker nzFormat="yyyyMMdd" name="pzDate" [(ngModel)]="pzDate"></nz-date-picker>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
        <div nz-row>
            <div nz-col nzSpan="24">
                <nz-form-item>
                    <nz-form-label>计划交货日期</nz-form-label>
                    <nz-form-control>
                        <nz-date-picker nzFormat="yyyyMMdd" name="jhDate" [(ngModel)]="jhDate"></nz-date-picker>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>  
        <div nz-row>
            <div nz-col nzSpan="24">
                <nz-form-item>
                    <nz-form-label>备注</nz-form-label>
                    <nz-form-control>
                            <input nz-input [(ngModel)]="remark" name="remark"> 
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>       
    </form>
    <div class="footer">
        <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>Cancel</span></button>
        <button type="button" (click)="submit()" class="ant-btn ant-btn-primary"><span>Submit</span></button>
    </div>   
</nz-drawer>
